<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">
    // import {
    //     createRenderer,
    //     render,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
    // import {
    //     createRenderer,
    //     render,
    //     h,
    //     onMounted,
    //     onBeforeMount,
    //     ref,
    //     onBeforeUpdate,
    //     onUpdated,
    //     onBeforeUnmount,
    //     onUnmounted,
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        // renderOptions,
        h,
        render,
        Fragment,
        Text,
        onMounted,
        onBeforeMount,
        ref,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted,
        getCurrentInstance,
    } from "./runtime-dom.js"

    // 父组件初始化 -> 子组件初始化 -> 子完成 -> 父完成
    // 父组件更新 -> 子组件更新 -> 子完成 -> 父完成
    const my = {
        props: {
            val: {
                type: Number,
            }
        },
        setup(props, { emit }) {



            console.log('child setup', getCurrentInstance())
            onBeforeMount(() => {
                console.log('child onBeforeMount', getCurrentInstance())
            })
            onMounted(() => {
                console.log('child onMounted')
            })


            onBeforeUpdate(() => {
                console.log('child onBeforeUpdate')
            })



            onUpdated(() => {
                console.log('child onUpdated')
            })
            return () => h(
                'div',
                props.val
            )
        },

    }


    const vueComponent = {

        setup(props, { emit }) {
            console.log('parent setup', getCurrentInstance())
            onBeforeMount(() => {
                console.log('parent onBeforeMount')
            })
            onMounted(() => {
                console.log('parent onMounted')
            })

            const val = ref(1)
            onBeforeUpdate(() => {
                console.log('parent onBeforeUpdate')
            })


            setTimeout(() => {
                val.value = 2
            }, 1000)
            onUpdated(() => {
                console.log('parent onUpdated')
            })
            return () => h(
                my,
                {
                    val: val.value
                }

            )
        },

    }

    render(h(vueComponent), document.body)


</script>

</html>